<template>
    <div class="search-wrap">
        <div class="selecy-search">
            <input type="text" placeholder="请输入订单信息" v-model="search.name">
            <van-icon name="search" class="search-cion" @click="handleData"/>
        </div>
      <div class="select-table">
             <van-tabs  v-model="typeid" @change="handleDatas">
                  <van-tab  v-for="item in status.list" :key="item.id" :title="item.name">
                  </van-tab>
        </van-tabs>
      </div>
        <!-- <van-row gutter="10">
            <van-col span="7">
                <van-field v-model="search.name" placeholder="订单名称、编号查询" />
            </van-col>
            <van-col span="7">
                <van-field
                    v-model="search.status_name"
                    readonly
                    right-icon="arrow-down"
                    placeholder="任务状态"
                    @click='status.show = true'
                />
            </van-col>
            <van-col span="7">
                <van-field
                    v-model="search.time_name"
                    readonly
                    right-icon="arrow-down"
                    placeholder="任务时间"
                    @click='time.show = true'
                />
            </van-col>
            <van-col span="3">
                <van-button icon="search" size="small" type="primary" @click="handleData" />
            </van-col>
        </van-row> -->
        <van-action-sheet v-model="status.show" :actions="status.list" close-on-click-action @select="onSelectStatus" />
        <van-action-sheet v-model="time.show" :actions="time.list" close-on-click-action @select="onSelectTime" />
    </div>
</template>

<script>
import moment from "moment";
export default {
    data(){
        return{
            typeid:"",
            status: {
                show: false,
                list: [
                    {id:-1,name:"全部"},
                    { id: 1, name: '任务已发出' },
                    { id: 2, name: '调度已确认' },
                    { id: 3, name: '飞手已接受' },
                    { id: 4, name: '飞行结束' },
                    { id: 5, name: '任务已完成' },
                    { id: 0, name: '任务已驳回' },
                ],
            },
            time: {
                show: false,
                list: [
                    { name: '全部', id: undefined, },
                    { name: '最近一周', id: moment().subtract(7, 'days').startOf('day').format("YYYY-MM-DD HH:mm:ss") + '~' + moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') },
                    { name: '最近一月', id: moment().subtract(1, 'month').startOf('day').format("YYYY-MM-DD HH:mm:ss") + '~' + moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') },
                    { name: '最近三月', id: moment().subtract(3, 'month').startOf('day').format("YYYY-MM-DD HH:mm:ss") + '~' + moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') },
                    { name: '最近半年', id: moment().subtract(6, 'month').startOf('day').format("YYYY-MM-DD HH:mm:ss") + '~' + moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') },
                    { name: '最近一年', id: moment().subtract(12, 'month').startOf('day').format("YYYY-MM-DD HH:mm:ss") + '~' + moment().endOf('day').format('YYYY-MM-DD HH:mm:ss') }
                ]
            }
        }
    },
    computed: {
        search(){
            return this.Search()
        },
        pagination(){
            return this.Pagination()
        }
    },
    methods: {
        onSelectStatus(val){
            let {id, name} = val
            this.search.status = id
            this.search.status_name = name
        },
        onSelectTime(val){
            let {id, name} = val
            this.search.time = id
            this.search.time_name = name
        },
        handleData(){
            
            this.pagination.pageNo = 1
            this.pagination.finished = false
            this.GetList()
            
        },
        handleDatas(val){
                
            let keyword =   this.status.list[Number(val)].name
            let status = this.status.list[Number(val)].id
            if(status == -1){
                status = undefined
            }
             if(keyword == "全部"){
              keyword = ""
             }
              this.search.status_name = keyword
              this.search.status = status
              this.handleData()
        }
    },
    inject: ['Search', 'Pagination', 'GetList'],
    // watch:{
    //     typeid(val){
    //         //  let keyword =
    //       let keyword =   this.status.list[Number(val)].name
    //       if(keyword == "全部"){
    //           keyword = ""
    //       }
    //       this.search.status_name = keyword
    //     setTimeout(()=>{
    //          this.handleData()
    //     })
         
    //     }
    // },
}
</script>

<style lang="scss" scoped>
::v-deep{
    .van-cell{
        // background-color: rgba(0,0,0,.1);
        border-radius: 2PX;
        padding: 0.08rem 0.42667rem;
        font-size: .30rem;
        border: 0.02rem solid #ccc;
    }
}
.search-wrap{
    margin-bottom: 15px;
}
.selecy-search{
    position: relative;
    margin: 10px 0;
    padding: 0 10px;
    height: 35px;
    input{
        width: 100%;
        height: 100%;
        font-size: 15px;
        text-indent: .5em;
        border: none;
        background-color: rgba(142,142,147,.1);
        border-radius: 3px;
        
    }

    .search-cion{
        font-size: 23px;
        display: block;
        position: absolute;
        top: 0;
        line-height: 35px;
        right: 18px;
        color: #8E8E93;
        border-left: 1px solid rgba(142,142,147,.1);
        padding-left: 10px;
        height: 100%;
        
    }
    
}
</style>